* {
  margin: 0;
  padding: 0;
  font-style: normal;
  list-style: none;
}
body {
  background-color: #ccc;
}

// 字体图标
/* Logo 字体 */
@font-face {
  font-family: 'iconfont';
  src: url('../iconfont/.eot?t=1587896897240'); /* IE9 */
  src: url('../iconfont/.eot?t=1587896897240#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
      url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAN8AAsAAAAAB/AAAAMuAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKgqDDIJEATYCJAMUCwwABCAFhG0HVBvUBhEVnBPIvhqw22LA6oS+4fMs88PSh5dSpIbiFsqZbGZm1gio/X578j6HaRNL8BPeRCuJkEiiiegZUiMkhpAIRaNYyFyN+98nNzfY2d9IhFKgp0PtwE12BN1shlpFGdwOGhCGGeXz3fw3qLGeZ5aFgYytFN4AXc9bRvFtrVkJVKfCRFUeydonj/JnFrJ0kJ1crmDcHxwzXoJO89Y2t6iiLo8GnODAooNsD9LC9A/xapd22OsJaDKgLqxG2w5FRrsFhL2atUdJOWSZDxdBrWRsJtyCoMSn9zNw4398+JkZIyOqEnSjzcpmwuIf9j+xvtBHPq4ffeOZwU8ioY5M2Cm1bkMKA3VJk7pYNo+iiLyzv9N/bQiIpVz6T15QNGlClkSBUANSW8AiCWbeqc2NZQwlfFmJLCIfB/8+1qpAEwp2gDNUPsbIoknTUeBwVw3upB4ZwJ9ZCe3UCwgbrjSN4+LX90vv2zt4Y1Z0oviETS2jHUsefk3keX2hWIewgxFPSCtPdgSrnaVycavobCsulRsY8hgvm5RUHG9zl3RlNt+eUID4wj3fnJCCDsIPvC+kor3w9DmZjbHVi7mFyWrfG3Y81tI6RIqTUMa//7/vWNc3xn3l6JitH2zBCU8zeRbD1Hy0aXgK8H9nC7Nh6z4/LfsBpFv6BfYb+vGzPsf90V9WxHL/hRbg6RoMoOO/L9CP+8Z5rXm/hteyLGsCqquykmlzFXtlZAR75E8IfkmELm/jKHtv2ByUFI+HqEE/JMUYImPqUGk2DTXFAjSZsDG5WbcTSEJeGHcNEHS4g6jNAyQdHhEZ8wqVPn9Q0xEOmhh+O895dCkeXhiVoAX9hGhocJZBDkH6J/qpU5wU+Phf5DG6oS6qbPgDB+QxBow334g4cEw9vMNm2HUEmSmhkSKI5GtZurIXFYb62cELhhSBLKA9gcggA+fWFofc+z8hb9JRuCaryv4LsVGsH9QKVQvEh3RolXUtl4xuvIYQDnAY6YF3MKPODBCQy1slyBCF0MOXXZWkmmsrLeaX9w+Qw+dBBxEqWVFr2J66kOjBbzQ55ZmPY2BVz4hJNO0fUYWa2QwAAA==')
      format('woff2'),
    url('../iconfont/.woff?t=1587896897240') format('woff'),
    url('../iconfont/.ttf?t=1587896897240') format('truetype'),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url('../iconfont/.svg?t=1587896897240#iconfont') format('svg'); /* iOS 4.1- */
}
// 主要盒子
.wraper {
  padding-top: 20px;
  width: 300px;
  height: 500px;
  margin: 100px auto;
  background: url(../images/bg.jpg) center;

  //   上面旋转部分
  .rotate_box {
    margin: 0 auto;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: url(../images/样式.png);

    .inner {
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: block;
      width: 100px;
      height: 100px;
      background-color: #f30;
      border-radius: 50%;
    }
    animation: rotate linear 10s infinite;
  }

  //   旋转动画
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  //   播放部分
  .music {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 10px auto 0;
    width: 230px;
    height: 50px;

    div {
      display: inline-block;
      font-family: 'iconfont';
      font-size: 25px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;

      &.current_timer {
        font-size: 15px;
        width: 50px;
      }
      &.all_timer {
        font-size: 15px;
        width: 50px;
      }
    }
  }

  //   歌词部分
  .irc {
    width: 298px;
    height: 188px;
    margin: 0 auto;
    background-color: #ccc;

    textarea {
      width: 100%;
      height: 100%;
      outline: none;
      resize: none;
      border: none;
      background-color: transparent;
    }
  }
}
